<template>
  <div class="body">
    <div v-show="morestatus == 1">
      <div class="document">
        <h4>快速操作</h4>
        <div class="Jump">
          <div @click="clockopen"><i class="el-icon-collection"></i><span>打卡</span></div>
          <el-badge :value="quantity" class="item" @click.native="$router.push('/agency')">
            <i class="el-icon-box"></i><span>待办</span>
          </el-badge>
          <div @click="$router.push('/Account')"><i class="el-icon-message"></i><span>个人台账</span></div>
        </div>
      </div>
      <div class="message">
        <div style="background-color: #19d37c">
          <h5>已受理</h5>
          <h2>{{ Acceptance }}</h2>
        </div>
        <div style="background-color: #4e42f7">
          <h5>已办结</h5>
          <h2>{{ handle }}</h2>
        </div>
        <div style="background-color: #f9c605">
          <h5>今日办理</h5>
          <h2>{{ returnNum }}</h2>
        </div>
      </div>
      <div class="work">
        <h4>工作手册</h4>
        <el-button type="primary" style="margin-left: 20px" @click="$router.push('/manual')">业务指导</el-button>
      </div>
      <div class="notice">
        <div class="title">
          <h4>通知公告</h4>
          <div class="more" @click="more">更多</div>
        </div>
        <div class="showtitle" v-show="isShow == 1">
          <h3 style="margin-left: 10px">{{ titlemessage[0].title }}</h3>
          <div class="titlemessage">
            <span>{{ titlemessage[0].createTime }}&emsp;</span>
            <span>{{ titlemessage[0].author }}</span>
          </div>
        </div>
        <el-empty description="暂无通知公告" :image-size="100" v-show="isShow == 2"></el-empty>
      </div>
      <el-dialog title="打卡" :visible.sync="dialogFormVisible">
        <clockIn></clockIn>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false" v-show="opennumber == 1">确 定</el-button>
          <el-button type="primary" @click="dialogFormVisible = false" v-show="opennumber == 2">提 交</el-button>
          <el-button type="primary" @click="dialogFormVisible = false" v-show="opennumber == 2">清 空</el-button>
        </div>
      </el-dialog>
    </div>
    <div v-show="morestatus == 2">
      <more></more>
    </div>
  </div>
</template>

<script>
import clockIn from './clockIn/clockIn.vue'
import * as admin from '@/api/admin'
import more from './more/index.vue'
import api from '@/api/api'

export default {
  data() {
    return {
      morestatus: 1,
      opennumber: '',
      dialogFormVisible: false,
      Acceptance: 0,
      handle: 0,
      returnNum: 0,
      current: 1,
      limit: 5,
      timer: '',
      quantity: '',
      titlemessage: [{ title: '', author: '', createTime: '', picture: '' }],
      id: '',
      isShow: 1,
    }
  },
  created() {
    this.getnotice()
    this.getStatistics()
    this.getquantity()
  },
  mounted() {
    let currentTimer = setInterval(() => {
      api.Statistics().then(res => {
        this.Acceptance = res.data.allAccepted
        this.handle = res.data.allCompleted
        this.returnNum = res.data.acceptedToday
      })
      api.quantity().then(e => {
        this.quantity = e.data
      })
    }, 60000)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(currentTimer)
      currentTimer = null
    })
  },
  methods: {
    getquantity() {
      api.quantity().then(e => {
        this.quantity = e.data
      })
    },
    clockopen() {
      this.dialogFormVisible = true
    },
    getnotice() {
      admin.getnotice(this.current, this.limit, this.title, 1).then(res => {
        if (res.data.total == 0) {
          this.isShow = 2
        } else {
          this.id = res.data.noticeList[0].id
          this.titlemessage = res.data.noticeList
        }
      })
    },
    getStatistics() {
      api.Statistics().then(res => {
        this.Acceptance = res.data.allAccepted
        this.handle = res.data.allCompleted
        this.returnNum = res.data.acceptedToday
      })
    },
    more() {
      this.morestatus = 2
    },
    Tip() {
      this.morestatus = 1
    },
  },
  components: {
    clockIn,
    more,
  },
}
</script>

<style lang="scss" scoped>
@import './homepage.scss';
</style>
